<template>
    <div class="hpv_banner">
        <image src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg" mode="" />
    </div>

    <!-- tab hpv导航 -->
    <view class="tabNav">
        <view class="tab_item" @click="changeTab(item._id, index)" v-for="(item, index) in tabNav" :key="item._id">
            <text>{{ item.name }}</text>
            <view class="border" :class="tavIndex === index ? 'active' : ''"></view>
        </view>
    </view>
    <!-- 选中的hpv列表 -->
    <view class="hpv_list card mt16 ml16 mr16" v-for="(item, index) in selectHpvList" :key="item._id">
        <view class="hpv_name">{{ item.name }}</view>
        <view class="hpv_desc mt16">
            <view class="hpv_desc_item" v-for="(item2, index2) in item.describe" :key="index2">
                <view class="txt">{{ item2 }}</view>
            </view>
        </view>
        <view class="hpv_price mt16">
            <text>￥{{ item.price[0] }}-￥{{ item.price[1] }}</text>
        </view>
        <view class="hpv_yuyue" @click="goYuyue({
            id: item._id,
            hpv_name: item.name,
            hpv_desc: item.describe,
            hpv_price: item.price
        })">去预约</view>
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getHpvListApi } from '@/http/api'
import type { tavNavType, hpvListType, hpvOptions } from '@/dataType/data'

onMounted(() => {
    getHpvList()
})

//tab高亮下标
const tavIndex = ref(0)
//tab导航Hpv分类
const tabNav = ref<tavNavType[]>([])
//全部hpv列表
const hpvList = ref<hpvListType[]>([])
//选中hpv列表
const selectHpvList = ref<hpvListType[]>([])
const getHpvList = async () => {
    //调Hpv接口
    const res = await getHpvListApi()
    console.log('hpv-list:', res)
    tabNav.value = res.data.data[0].hpv_select;
    hpvList.value = res.data.data[0].hpv_list;
    selectHpvList.value = res.data.data[0].hpv_list;
}

//切换tab
const changeTab = (id: string, index: number) => {
    //处理高亮
    tavIndex.value = index;
    //切换筛选指定hpv列表
    if (index !== 0) {
        selectHpvList.value = hpvList.value.filter(item => {
            return item.hpv_id === id
        })
    } else {
        selectHpvList.value = hpvList.value
    }


}

//hpv预约

const goYuyue = (options: hpvOptions) => {
    const strParams = JSON.stringify(options)
    uni.navigateTo({
        url: `/pages/hpv/hpv_detail?objstr=${strParams}`
    })
}

</script>

<style lang="scss">
@import '@/assets/style/public.scss';

page {
    background: #f7f7f7;
}

.hpv_banner {
    image {
        width: 100%;
        height: 400rpx;
    }
}

.tabNav {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    .tab_item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx 20rpx;
        flex-direction: column;
        position: relative;

        .border {
            width: 60%;
            height: 4rpx;
            position: absolute;
            bottom: 0;
            transform: translateX(-100%);

            &.active {
                background: #00f;
                transform: translateX(0);
                transition: transform 0.3s cubic-bezier(0.43, 1.11, 0.23, 1.1);
                // transition-timing-function: ;
            }
        }
    }

}

// hpv list样式

.hpv_list {
    position: relative;

    .hpv_desc {
        display: flex;

        .hpv_desc_item {
            .txt {
                padding: 10rpx 20rpx;
                background: #f7f7f7;
                // display: inline-block;
                // border: 1px solid #f00;
                // &:nth-of-type(2) {
                //     margin-left: 30rpx;
                // }

            }
        }

    }

    .hpv_yuyue {
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        background: #3c7eef;
        padding: 10px 20rpx;
        border-radius: 10rpx;
        color: #fff;
    }
}
</style>